<template>
    <div>
        <el-dialog
            v-model="visible"
            title="付款"
            width="300px"
            @closed="handleCancel"
        >
            <div v-if="!success">
                <el-descriptions :column="1" size="large">
                    <el-descriptions-item label="原价">
                        {{ amountInfo.amount }} 元
                    </el-descriptions-item>
                    <el-descriptions-item label="优惠">
                        {{ amountInfo.reduce }} 元
                    </el-descriptions-item>
                    <el-descriptions-item label="应付">
                        <span class="text-6">
                            {{ amountInfo.realAmount }} 元
                        </span>
                    </el-descriptions-item>
                </el-descriptions>
                <el-form-item label="支付密码" v-if="amountInfo.realAmount > 0">
                    <el-input type="password" v-model="password" />
                </el-form-item>
                <div class="flex justify-center items-center">
                    <el-button size="large" @click="handlePay" type="primary"
                        >确认</el-button
                    >
                </div>
            </div>
            <div v-else class="flex flex-col justify-center items-center">
                <div>
                    <el-icon :size="80" color="green"><CircleCheck /></el-icon>
                </div>
                <div class="mt-4 text-4">付款成功</div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { createPayRecordApi } from '@/apis/payRecord'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { assign } from 'lodash-es'
import { defineExpose, ref } from 'vue'

// 是否显示
const visible = ref(false)
// 是否付款成功
const success = ref(false)
// 支付密码
const password = ref('')
// 金额信息
const amountInfo = ref({
    amount: 0,
    reduce: 0,
    realAmount: 0,
    method: '',
    type: 2,
    comment: undefined,
})

let gResolve = null
let gReject = null

// 重置所有数据
const resetValues = () => {
    visible.value = false
    success.value = false
    password.value = ''
    amountInfo.value = {
        amount: 0,
        reduce: 0,
        realAmount: 0,
        method: '',
        type: 2,
        comment: undefined,
    }
}

// 确认付款
const handlePay = async () => {
    if (password.value === '' && amountInfo.value.realAmount > 0) {
        ElMessage.error('请输入支付密码')
        return
    }
    const data: any = {
        num: dayjs().format('YYYYMMDDHHmmssSSS'),
        amount: amountInfo.value.amount,
        reduce: amountInfo.value.reduce,
        realAmount: amountInfo.value.realAmount,
        realPay: amountInfo.value.realAmount,
        status: 1,
        type: amountInfo.value.type,
        method: amountInfo.value.method,
        time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        comment: amountInfo.value.comment,
    }
    const res = await createPayRecordApi(data) as any
    success.value = true
    if(res) {
        // ElMessage.success('付款成功')
        data.id = res.id
    } else {
        ElMessage.error('付款失败')
    }
    setTimeout(() => {
        if (res) {
            gResolve(data)
        } else {
            gReject(false)
        }
        handleCancel()
    }, 500)
}

// 取消付款
const handleCancel = async () => {
    if (!success.value) {
        gReject(false)
    }
    resetValues()
}

// 付款
const pay = (info: {
    amount: number
    reduce: number
    realAmount: number
    method: string
    type: number
    comment: string
}) => {
    if (!info || info.realAmount === undefined) {
        return Promise.reject(false)
    }
    info = assign(
        {
            method: '其他收款方式',
            amount: info.amount,
            reduce: info.amount ? info.amount - info.realAmount : 0,
            type: 2,
            comment: undefined,
        },
        info
    )
    return new Promise((resolve, reject) => {
        gResolve = resolve
        gReject = reject
        amountInfo.value = info
        visible.value = true
    })
}

// 暴露方法
defineExpose({
    pay,
})
</script>

<style scoped></style>
